<template>
	<view class="page fash-search">
		<block v-for="(item, i) in count_array" :key="i">
			<view class="box">
				<view class="title flex-row-between" @click="goNext('/pages/hotel/hotelSearchMore?type=' + count_array[i])">
					<view class="name font14">{{dataObj[item].name}}</view>
					<view class="more">
						<text class="font12 font-969696">更多</text>
						<uni-icons type="arrowright" size="12" :color="themeColor"></uni-icons>
					</view>
				</view>
				<view class="list flex-row-start flex-wrap">
					<block v-for="(tag, j) in dataObj[item].data" :key="j">
						<view v-show="j < 8" class="tag flex-row-center" @click="bindClick(tag)">{{tag.name}}</view>
					</block>
				</view>
			</view>
			<view class="hr7" v-show="i < (count_array.length - 1)"></view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				themeColor: '#03004c',
				dataObj: {},
				count_array: []
			}
		},
		onLoad: function() {
			this.$Http({
				url: 'hotelTag',
			}).then(res => {
				let arr = []
				Object.keys(res.data).forEach((item)=>{
					arr.push(item)
				})
				this.count_array = arr
				this.dataObj = res.data
			});
		},
		methods: {
			bindClick (e) {
				uni.$emit('chooseKey', e)
				// 关闭当前页面
				uni.navigateBack({ delta: 1 });
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({ url: url });
				} else {
					uni.navigateTo({ url: url });
				}
			}
		}
	}
</script>

<style lang="less">
	@import '@/common/css/variables.less';
	/* 快捷搜索 */
	.fash-search{
		.box{
			.title{
				height: 80rpx;padding: 0 30rpx 0 30rpx;
				.name{
					position: relative;padding-left: 20rpx;line-height: 28rpx;
					&::before{display: block;content: " ";width: 8rpx;height: 24rpx;background-color: @theme-color;border-radius: 6rpx;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
				}
			}
			.list{
				.tag{
					width: 25%;height: 130rpx;text-align: center; color: #646464;position: relative;padding: 0 20rpx;border-top: 2rpx solid #eee;font-size: 24rpx;
					&::after{display: block; content: "";width: 2rpx;height: 26rpx;background: #dcdcc8;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
					&:nth-child(4n+4)::after{width: 0;}
				}
				.item{
					border-top: 2rpx solid #eee;padding: 0 30rpx;font-size: 24rpx;line-height: 70rpx;
				}
			}
		}
	}
</style>
